<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>王五页面</title>
</head>
<style>
    .right{
        margin-left: 200px;
    }
    .left{
        margin-left: 100px;
    }
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layim/dist/css/layui.css">
<script src="${pageContext.request.contextPath}/static/layim/dist/layui.js"></script>
<body>
<%--Welcome<br/><input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>--%>
</body>

<%--<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    }
    else {
        alert('当前浏览器 Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        if (innerHTML==""){
            $("#message").append("求职者正在编辑问题"+'<br/>');
        }else{
            if (innerHTML.substring(0,3)=="求职者"){

                $("#message").append("<span class=\"left\">"+innerHTML+"</span>"+"<br/>");
            }else if(innerHTML.substring(0,3)=="招聘者"){

                $("#message").append("<span class=\"right\">"+innerHTML+"</span>"+"<br/>");
            }
        }

    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send("招聘者："+message);
    }
</script>--%>
<script>
    layui.use('layim', function(layim){
        var copyLayim = layim;
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket");
        } else {
            alert('当前浏览器 Not support websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function() {};
        //连接成功建立的回调方法
        websocket.onopen = function() {};
        //接收到消息的回调方法
        websocket.onmessage = function(event) {
            var data = event.data;//服务器返回的消息，前端页面可以根据不同的消息做不同的操作。
            console.log("啊肆肆肆肆肆肆接收到的消息:"+JSON.parse(data).content);
            console.log("啊肆肆肆肆肆肆接收到的用户:"+JSON.parse(data).username);
            if (JSON.parse(data).username != "${sessionScope.accountMap.accountName}"){
                console.log("啊肆肆肆肆肆肆进入接收");
                console.log("啊肆肆肆肆肆肆进入接收的数据："+JSON.parse(data));
                layim.getMessage(JSON.parse(data)); //res.data即你发送消息传递的数据（阅读：监听发送的消息
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function() {
            //    setMessageInnerHTML("WebSocket连接关闭");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
            closeWebSocket();
        };
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            //    document.getElementById('message').innerHTML += innerHTML + '<br/>';
        };
        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        };
        //发送消息
        function send(msg) {
            websocket.send(msg);
        };

        /**/
        layim.config({
            /*brief: false, //是否简约模式（如果true则不显示主面板）
            init: {
                url: 'layui/json/getList.json'
                ,data: {'userId': 1}
            },
            members: {
                url: 'layui/json/getMembers.json'
            },
            uploadImage: {
                url: '/upload/image'
            } ,*/
            //chatLog:  '跳转至聊天界面url'
            notice:true,
            isfriend:true,
            chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html',
            init: {
                mine: {
                    "username": "${sessionScope.accountMap.accountName}" //我的昵称
                    ,"id":"111"   //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    ,"avatar": "${pageContext.request.contextPath}/static/layui/images/user1.png" //我的头像
                },
                /*to :{
                    "username": "李四" //我的昵称
                    , "id": 222 //我的ID
                    , "status": "online" //在线状态 online：在线、hide：隐身
                    , "remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    , "avatar": "layui/images/.1.jpg" //我的头像
                }*/
            },
            brief: true//是否简约模式（如果true则不显示主面板）
        }).chat({
            name: '啊肆肆肆肆肆肆'
            ,type: 'friend'
            ,avatar: '${pageContext.request.contextPath}/static/layui/images/1.jpg'
            ,id: "222"
        });

        //layim消息发送监听器
        layim.on('sendMessage', function(res) {
            var mine = res.mine; //包含我发送的消息及我的信息
            var to = res.to; //对方的信息
            var msg = {
                id: mine.id,
                avatar: "${pageContext.request.contextPath}/static/layui/images/user1.png",
                username:mine.username,
                type: "friend",
                fromid: mine.id,
                content: mine.content
            };
            console.log(res);
            console.log(mine);
            console.log(to);
            console.log(to.id);
            send(JSON.stringify(msg));
        });

        //监听修改签名

    });
</script>
</html>
